<template>
  <view 
    class="fu-avatar"
    :class="[
      `fu-avatar--${shape}`,
      `fu-avatar--${size}`
    ]"
    :style="[
      {
        width: customSize ? `${customSize}rpx` : '',
        height: customSize ? `${customSize}rpx` : '',
        backgroundColor: bgColor
      }
    ]"
    @click="onClick"
  >
    <!-- 图片头像 -->
    <image
      v-if="src"
      :src="src"
      :mode="fit"
      class="fu-avatar__img"
      @error="onError"
    />
    
    <!-- 文字头像 -->
    <text 
      v-else-if="text"
      class="fu-avatar__text"
      :style="{
        color: textColor,
        fontSize: fontSize ? `${fontSize}rpx` : ''
      }"
    >{{ formatText }}</text>
    
    <!-- 图标头像 -->
    <text
      v-else-if="icon"
      class="fu-avatar__icon fu-icon"
      :style="{ fontSize: fontSize ? `${fontSize}rpx` : '' }"
    >{{ icon }}</text>
    
    <!-- 默认插槽 -->
    <slot></slot>
  </view>
</template>

<script>
/**
 * fu-avatar 头像组件
 * @description 用于展示用户头像、图标等
 * @property {String} src - 图片地址
 * @property {String} text - 文字内容
 * @property {String} icon - 图标名称
 * @property {String} shape - 形状，可选值：circle/square
 * @property {String} size - 尺寸，可选值：small/medium/large
 * @property {Number} customSize - 自定义尺寸，单位rpx
 * @property {String} bgColor - 背景颜色
 * @property {String} textColor - 文字颜色
 * @property {Number} fontSize - 字体大小，单位rpx
 * @property {String} fit - 图片填充模式
 * @event {Function} click - 点击头像时触发
 * @event {Function} error - 图片加载失败时触发
 */
export default {
  name: 'fu-avatar',
  props: {
    src: String,
    text: String,
    icon: String,
    shape: {
      type: String,
      default: 'circle',
      validator: value => ['circle', 'square'].includes(value)
    },
    size: {
      type: String,
      default: 'medium',
      validator: value => ['small', 'medium', 'large'].includes(value)
    },
    customSize: Number,
    bgColor: {
      type: String,
      default: '#eee'
    },
    textColor: {
      type: String,
      default: '#666'
    },
    fontSize: Number,
    fit: {
      type: String,
      default: 'cover'
    }
  },
  computed: {
    formatText() {
      if (!this.text) return ''
      return this.text.charAt(0).toUpperCase()
    }
  },
  methods: {
    onClick(event) {
      this.$emit('click', event)
    },
    onError(event) {
      this.$emit('error', event)
    }
  }
}
</script>

<style lang="scss" scoped>
.fu-avatar {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  color: var(--fu-text-color);
  
  // 形状
  &--circle {
    border-radius: 50%;
  }
  
  &--square {
    border-radius: var(--fu-radius-base);
  }
  
  // 尺寸
  &--small {
    width: 64rpx;
    height: 64rpx;
    .fu-avatar__text,
    .fu-avatar__icon {
      font-size: 32rpx;
    }
  }
  
  &--medium {
    width: 88rpx;
    height: 88rpx;
    .fu-avatar__text,
    .fu-avatar__icon {
      font-size: 44rpx;
    }
  }
  
  &--large {
    width: 108rpx;
    height: 108rpx;
    .fu-avatar__text,
    .fu-avatar__icon {
      font-size: 54rpx;
    }
  }
  
  &__img {
    width: 100%;
    height: 100%;
  }
  
  &__text {
    color: inherit;
    line-height: 1.2;
  }
  
  &__icon {
    font-family: 'fu-icon';
    color: inherit;
  }
}
</style> 